import React from "react";
export default class Footer extends React.Component {
    /**
     * Creates an instance of Footer.
     * @param {*} props
     * @memberof Footer
    //!this指的是Footer,生命周期函数中的this指向都是没有问题的，都是类实例化出来的对象
     */

    constructor(props) {
        super(props);
        this.state = { num: 0 };
        this.add = this.add.bind(this);
    }

    /**
     //在类中定义方法，可以是由于状态变化需要事件绑定的方法
     // !在类中自定义的方法默认开启了严格模式，阻断了本来的window指向
     //todo add方法不是组件实例调用，是直接调用的
     //?以后尽量用箭头函数生命事件处理函数，可以省去bind绑定
     */
    add() {
        // setState()里面放的是一个对象
        this.setState({ num: this.state.num + 1 }); //用新的值覆盖原来的值，只覆盖重复的
    }

    //!render()是最先执行的
    render() {
        return (
            <div>
                <h2>{this.state.num}</h2>
                {/* //!凡是在jsx中需要变量的地方均需要加上{} */}
                <button onClick={this.add}>点我+1</button>
            </div>
        );
    }
}

/* <button onClick={this.add}>点我+1</button>
    function add(){

    }
    document.querySelector('button').onclick=function(){
        add();
    } */
